<!--
 * @Author: quit
 * @Date: 2021-11-23 17:32:26
 * @LastEditTime: 2021-12-02 13:29:43
 * @Descripttion: 资产属性
-->
<template>
    <div id="AssetAttributes-container">
        <div class="app-container" style="">
            <el-row :gutter="15">
                <!-- 左侧 -->
                <el-col :span="8">
                    <el-card>
                        <el-row>
                            <el-col>
                                <el-divider content-position="left">搜索信息</el-divider>
                                <div class="search-box">
                                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                                        <el-form-item :label="'资产类型名'">
                                            <el-input v-model="searchForm.appname" :placeholder="$t('input.searchPlaceholder')" />
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" icon="el-icon-zoom-in">{{ $t('button.search') }}</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                            <el-col>
                                <div class="btns">
                                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItems">
                                        {{ $t('button.addItems') }}
                                    </el-button>
                                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">{{ $t('button.batchRemove') }}</el-button>
                                </div>
                            </el-col>
                            <el-col>
                                <el-table v-loading="loading" :data="tableData" :empty-text="$t('table.emptyText')" style="width: 100%">
                                    <el-table-column type="selection" min-width="40" fixed="left" />
                                    <el-table-column prop="appid" label="ID" min-width="45" fixed="left" />
                                    <el-table-column prop="appname" :label="'资产类型名'" min-width="80" fixed="left" />
                                    <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                                        <template slot-scope="scope">
                                            <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                            <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                            <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- 分页 -->
                                <el-pagination
                                    :current-page="pages.page"
                                    :page-sizes="[1, 5, 10]"
                                    :page-size="pages.size"
                                    layout="prev, pager, next, total, sizes, jumper"
                                    :total="pages.total"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 右侧 -->
                <el-col :span="16">
                    <el-card>
                        <el-row>
                            <el-col>
                                <el-divider content-position="left">资产信息</el-divider>
                                <div class="search-box">
                                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                                        <el-form-item :label="'资产类名'">
                                            <el-input v-model="searchForm.appname" />
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                            <el-col>
                                <div class="btns">
                                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItems">
                                        {{ $t('button.addItems') }}
                                    </el-button>
                                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">{{ $t('button.batchRemove') }}</el-button>
                                </div>
                            </el-col>
                            <el-col>
                                <el-table v-loading="loading" :data="tableData" :empty-text="$t('table.emptyText')" style="width: 100%">
                                    <el-table-column type="selection" min-width="40" fixed="left" />
                                    <el-table-column prop="appid" label="ID" min-width="45" fixed="left" />
                                    <el-table-column prop="appname" :label="'资产类型ID'" min-width="80" fixed="left" />
                                    <el-table-column prop="appname" :label="'资产信息名'" min-width="80" fixed="left" />
                                    <el-table-column prop="appname" :label="'资产分析类别'" min-width="80" fixed="left" />
                                    <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                                        <template slot-scope="scope">
                                            <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                            <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- 分页 -->
                                <el-pagination
                                    :current-page="pages.page"
                                    :page-sizes="[1, 5, 10]"
                                    :page-size="pages.size"
                                    layout="prev, pager, next, total, sizes, jumper"
                                    :total="pages.total"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            searchForm: {
                appname: ''
            },
            loading: false,
            tableData: [],
            pages: {
                page: 1,
                size: 10,
                total: 0
            }
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {}
}
</script>
<style lang="scss" scoped>
#AssetAttributes-container {
    .app-container {
        .search-box {
            border: 1px solid #dcdfe6;
            border-top: none;
            padding: 34px 10px 10px 10px;
            margin-top: -14px;
        }
        .btns {
            margin: 10px 0;
        }
    }
}
</style>
